<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
          <el-form-item label="收货日期">
            <el-date-picker type="date" placeholder="选择收货日期" v-model="queryParams.receiveDate"
              style="width: 140px;"></el-date-picker>
          </el-form-item>

          <el-form-item label="收货单号" prop="askNO">
              <el-input
                v-model="queryParams.receiveNo"
                placeholder="请输入收货单号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <!-- <el-form-item label="收货日期" prop="receiveDate">
              <el-input
                v-model="queryParams.receiveDate"
                placeholder="请输入收货日期"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item> -->
            <el-form-item label="业务员" prop="salesman">
              <el-input
                v-model="queryParams.salesman"
                placeholder="请输入业务员"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="供应商" prop="supplier">
              <el-input
                v-model="queryParams.supplier"
                placeholder="请输入供应商名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="收货人" prop="receiveman">
              <el-input
                v-model="queryParams.receiveman"
                placeholder="请输入收货人名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

             <el-form-item label="审核状态">
            <el-select v-model="queryParams.status" placeholder="请选择请购单审核状态">
              <el-option label="审核通过" value="审核通过"></el-option>
              <el-option label="待审核" value="待审核"></el-option>
              <el-option label="审核打回" value="审核打回"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
          <!-- <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改</el-button>
            </el-col> -->
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
              @click="handleDelete">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-tooltip placement="top">
          <div slot="content">点击任意一行列，即可在下方查看收货单明细记录</div>
          <el-table :data="orderdata" v-loading="loading" @row-click="showTab">
            <el-table-column label="收货单号" prop="receiveNo"></el-table-column>
        <el-table-column label="收货日期" prop="receiveDate"></el-table-column>
        <el-table-column label="业务员" prop="salesman"></el-table-column>
        <el-table-column label="供应商" prop="supplier"></el-table-column>
        <el-table-column label="收货人" prop="receiveman"></el-table-column>
         <el-table-column label="备注" prop="remark"></el-table-column>
         
           <el-table-column label="审核状态" prop="status"></el-table-column>

            <el-table-column label="操作" align="center" width="150px" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete"
                  @click="handleDelete1(scope.row)">审核</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete"
                  @click="handleDelete1(scope.row)">退回</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tooltip>

        <el-dialog title="收货单信息" :visible.sync="open" width="30%" center>
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="收货单号" prop="receiveNo">
              <el-input v-model="form.receiveNo" placeholder="请输入收货单号" style="width: 240px;" />
              <!-- <el-date-picker type="date" placeholder="选择日期" v-model="form.RequestorderNo" style="width: 240px;" /> -->
            </el-form-item>

              <el-form-item label="收货日期" prop="receiveDate">
              <el-date-picker type="date" placeholder="选择收货日期" v-model="form.requestDate" style="width: 240px;" />

            </el-form-item>


            
            <el-form-item label="业务员" prop="salesman">
              <el-input v-model="form.salesman" placeholder="请输入业务员名称" style="width: 240px;" />
            </el-form-item>
            

            <el-form-item label="供应商" prop="supplier">
              <el-input v-model="form.supplier" placeholder="请输入供应商名称" style="width: 240px;" />
            </el-form-item>
             <el-form-item label="收货人" prop="receiveman">
              <el-input v-model="form.receiveman" placeholder="请输入收货人名称" style="width: 240px;" />
            </el-form-item>
             <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" style="width: 240px;" />
            </el-form-item>
         
           




            <!-- <el-select v-model="form.OrderType" placeholder="请选择订单类型" style="width: 240px;" >
            <el-option label="销售订单" value="销售订单"></el-option>
            <el-option label="采购订单" value="采购订单"></el-option>
            <el-option label="委托加工订单" value="委托加工订单"></el-option>
          </el-select> -->

            <!-- <el-form-item label="审核状态" prop="status">
            <el-option label="审核通过" value="审核通过"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="待审核" value="审核退回"></el-option>
          </el-form-item> -->
            <!-- <el-col :span="8"> -->
            <el-form-item label="审核状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择审核状态">
                <el-option label="审核通过" value="审核通过"></el-option>
                <el-option label="待审核" value="待审核"></el-option>
                <el-option label="待审核" value="审核退回"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="审核状态" prop="status">
              <el-option label="审核通过" value="审核通过"></el-option>
              <el-option label="待审核" value="待审核"></el-option>
              <el-option label="待审核" value="审核退回"></el-option>
            </el-form-item> -->

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>

          </div>
        </el-dialog>

        <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
          :total="total" />

        <el-tabs v-model="activeName" v-if="showCard">
          <el-tab-pane label="收货单明细" name="first">
            <h2 align="center">{{ receiveNo }}收货单明细</h2>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm">新增明细</el-button>
              </el-col>
            </el-row>
            <el-table :data="detailedData" v-loading="loading">
                 <el-table-column label="物品描述" align="center">
            <el-table-column prop="itemId" label="代号" align="center" />
            <el-table-column prop="name" label="名称" align="center" />
            <el-table-column prop="size" label="规格" align="center" />
            <!-- <el-table-column label="材质" align="center" /> -->
            <el-table-column prop="conversion" label="转化率" align="center" />
          </el-table-column>
          <el-table-column prop="attribute" label="属性" align="center" />
          <el-table-column prop="colour" label="颜色" align="center" />
          <el-table-column prop="contractNo" label= "合同号" align="center" />
          <el-table-column prop="warehouse" label="仓库" align="center" />
           <el-table-column align="center" label="主单位">
            <el-table-column prop="unit1" align="center" label="单位" />
             <el-table-column prop="number1" align="center" label="数量" />
                
                 <el-table-column prop="monovalent" align="center" label="单价" />
                  <el-table-column prop="TaxPrice" align="center" label="含税价" />
                   <el-table-column prop="amount" align="center" label="金额" />
              </el-table-column>
              <el-table-column align="center" label="副单位">
                <el-table-column prop="unit2" align="center" label="单位" />
                <el-table-column prop="number2" align="center" label="数量" />
                
              </el-table-column>
            <el-table-column prop="taxRate" align="center" label="税率%" />
            <el-table-column prop="taxAmount" align="center" label="税额" />  
            <el-table-column prop="priceTax" align="center" label="价税合计" />
            <el-table-column prop="carriage" align="center" label="运杂费" /> 
            <el-table-column prop="remark" align="center" label="备注" />
            <el-table-column prop="record" align="center" label="源单数据" />   
            <el-table-column prop="number3" align="center" label="已入库数" /> 
            <el-table-column prop="number4" align="center" label="已记账数" />
            <el-table-column prop="counterNo" align="center" label="对应单号（订单号、质检订单号）" />       
              <el-table-column prop="packages" label="操作" align="center" width="150px" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-edit"
                    @click="handleUpdateComm(scope.row)">修改</el-button>
                  <el-button size="mini" type="text" icon="el-icon-delete"
                    @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog :title="titleComm" :visible.sync="openComm" width="500px" append-to-body>
      <el-form :model="formComm" :rules="rulesComm" ref="formComm" label-width="100px">
        <el-form-item label="代号" prop="itemId">
          <el-input v-model="formComm.itemId" placeholder="请输入物品代号" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="formComm.name" placeholder="请输入物品名称" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="规格" prop="size">
          <el-input v-model="formComm.size" placeholder="请输入物品规格" style="width: 240px;" />
        </el-form-item>
        
        <el-form-item label="转化率" prop="conversion">
          <el-input v-model="formComm.conversion" placeholder="请输入转化率" style="width: 240px;" />
        </el-form-item>
       
        <el-form-item label="属性" prop="attribute">
          <el-input v-model="formComm.attribute" placeholder="请输入物品属性" style="width: 240px;" />
        </el-form-item>
       
        <el-form-item label="颜色" prop="colour">
          <el-input v-model="formComm.colour" placeholder="请输入物品颜色" style="width: 240px;" />
        </el-form-item>
        
        <el-form-item label="合同号" prop="contractNo">
          <el-input v-model="formComm.contractNo" placeholder="请输入合同号" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="仓库" prop="warehouse">
              <el-select v-model="form.warehouse" placeholder="请选择仓库">
                <el-option label="仓库1" value="仓库1"></el-option>
                <el-option label="仓库2" value="仓库2"></el-option>
                <el-option label="仓库3" value="仓库3"></el-option>
              </el-select>
            </el-form-item>
        <!-- <el-form-item label="仓库" prop="warehouse">
          <el-input v-model="formComm.warehouse" placeholder="请输入物品产商名称" style="width: 240px;" />
        </el-form-item> -->
        <el-form-item label="主单位单位" prop="unit1">
          <el-input v-model="formComm.unit1" placeholder="请输入主单位单位" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="主单位数量" prop="number1">
          <el-input v-model="formComm.number1" placeholder="请输入主单位数量" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="单价" prop="monovalent">
          <el-input v-model="formComm.monovalent" placeholder="请输入物品单价" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="含税价" prop="TaxPrice">
          <el-input v-model="formComm.TaxPrice" placeholder="请输入物品含税价" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="formComm.amount" placeholder="请输入金额" style="width: 240px;" />
       </el-form-item>
        <el-form-item label="副单位单位" prop="unit2">
          <el-input v-model="formComm.unit2" placeholder="请输入副单位单位" style="width: 240px;" />
       </el-form-item>
        <el-form-item label="副单位数量" prop="number2">
          <el-input v-model="formComm.number2" placeholder="请输入副单位数量" style="width: 240px;" />
       </el-form-item>
        <el-form-item label="税率%" prop="taxRate">
          <el-input v-model="formComm.taxRate" placeholder="请输入物品税率" style="width: 240px;" />
       </el-form-item>
        <el-form-item label="税额" prop="taxAmount">
          <el-input v-model="formComm.taxAmount" placeholder="请输入税额" style="width: 240px;" />
       </el-form-item>
        <el-form-item label="价税合计" prop="priceTax">
          <el-input v-model="formComm.priceTax" placeholder="请输入价税合计金额" style="width: 240px;" />
       </el-form-item>
       <el-form-item label="运杂费" prop="carriage">
          <el-input v-model="formComm.carriage" placeholder="请输入运杂费" style="width: 240px;" />
       </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formComm.remark" placeholder="请输入备注" style="width: 240px;" />
       </el-form-item>
        <el-form-item label="源单数据" prop="record">
          <el-input v-model="formComm.record" placeholder="请输入源单数据" style="width: 240px;" />
       </el-form-item>
        <el-form-item label="已入库数" prop="number3">
          <el-input v-model="formComm.number3" placeholder="请输入已入库数" style="width: 240px;" />
       </el-form-item>
        <el-form-item label="已记账数" prop="number4">
          <el-input v-model="formComm.number4" placeholder="请输入已记账数" style="width: 240px;" />
       </el-form-item>
         <el-form-item label="对应单号（订单号、质检订单号）" prop="counterNo">
          <el-input v-model="formComm.counterNo" placeholder="请输入对应单号（订单号、质检订单号）" style="width: 240px;" />
       </el-form-item>

        <!-- <el-form-item label="正唛" prop="frontMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.frontMark">
            </el-input>
         </el-form-item>
         <el-form-item label="侧唛" prop="sideMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.sideMark"></el-input>
         </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormComm">确 定</el-button>
        <el-button @click="cancelComm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
export default {
  data() {
    return {
      title: null,
      titleComm: null,
      total: 0,
      open: false,
      openComm: false,
      form: {},
      formComm: {},
      rules: {},
      rulesComm: {},
      orderNo: '',
      textarea: '',
      input1: '',
      input2: '',
      input3: '',
      orderNo: '',
      showCard: true,
      activeName: 'first',
      orderdata: [{
          receiveNo: 'SHD98789HJ1',
          supplier: '供应商A',
          receiveman: '水月',
          receiveDate: '2021-01-01',
          salesman: '若依',
          remark: '安全送达',
          status: '急需入库'
          }, {
          receiveNo: 'SHD98119HJ1',
          supplier: '供应商B',
          receiveman: '水月',
          receiveDate: '2021-12-11',
          salesman: '若依',
          remark: '安全送达',
          status: '待审核'

            }, {
          receiveNo: 'SHD98119HJ8',
          supplier: '供应商B',
          receiveman: '水月',
          receiveDate: '2022-12-11',
          salesman: '若依',
          remark: '仔细核对',
         status: '审核打回'
            }],

      loading: false,
      dialogVisible: false,
      editForm: {
        //     orderNo: 'DM123456',

        //  requestDept: '包装车间',
        //  RequestorderNo: 'QGD1811191879',
        //  requestDate: '2021-01-01',
        //  requestType: '按单采购',
        //  requestman: '业务员A',
        //  requestname: '外箱(WX)',
        //  contractNo: 'OD298765545',
      },

      detailedData: [{
                id: '1',
                itemId: '平X-YL047305',
                name: '0473055A外箱',
                size: '规格3',
                conversion: '1',
                advanceDate: '0',
                itemType: '外箱',
                attribute: '',
                colour: '',
                company: '单位1',
                Packing: '1',
                quantity: '1',
                remarks: '备注1'
            }, {
                id: '2',
                itemId: '平X-YL047306',
                name: '0473055A外箱',
                size: '规格1',
                conversion: '1',
                advanceDate: '0',
                itemType: '外箱',
                attribute: '',
                colour: '',
                company: '单位1',
                Packing: '1',
                quantity: '1',
                remarks: '备注1'
            },
          {
                id: '3',
                itemId: 'HZ-BF3064037',
                name: 'BF3064037花纸',
                size: '规格2',
                conversion: '1',
                advanceDate: '0',
                itemType: '花纸',
                attribute: '',
                colour: '',
                company: '单位1',
                Packing: '1',
                quantity: '1',
                remarks: '备注1'
            }],

      // pickerOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now();
      //   },
      // },
      // value1: "",
      // value2: "",

      defaultProps: {
        children: 'children',
        label: 'label'
      },

      total: 0,
      loading: false,
      radio: 3,
      queryParams: {
        date1: '',
        date2: '',
        radio: 3,
        radio1: 3,
        radio2: 3,
        radio3: 3,
        radio4: 3,
        radio5: 3,
      },
      showSearch: true,
      single: false,
      multiple: false,
      tableData: [],
    }
  },
  methods: {
    showTab(row) {
      this.orderNo = row.orderNo;
      this.showCard = true;
      console.log('Clicked row:', row);
    },
    handleEdit(row) {
      this.currentEditRow = { ...row }; // 深拷贝当前行数据到editForm
      this.open = true; // 或者直接赋值，取决于你是否需要在关闭弹窗时重置表单
      this.dialogVisible = true;
    },
    // handleUpdate() {
    //   // const index = this.orderdata.findIndex(item => item.RequestorderNo === this.currentEditRow.RequestorderNo);
    //   // if (index !== -1) {
    //   //   this.$set(this.orderdata, index, { ...this.editForm }); // 使用$set来确保响应性
    //   // }
    //   // this.dialogVisible = false;
    //   this.open = { ...row };
    //   this.dialogVisible = true;
    // },

    submitForm() {
      this.open = false;
    },
    cancel() { this.open = false; },
    handleQuery() {
      this.loading = false;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleAdd() {
      this.title = '新增'
      this.open = true;
      this.isEdit = false;
    },
    handleAddComm() {
      this.titleComm = '新增收货单明细'
      this.openComm = true;
    },
    handleUpdateComm(row) {
      this.titleComm = '编辑收货单明细'
      this.openComm = true;
      this.formComm = row;
    },
    submitFormComm() {
      this.openComm = false;
    },
    cancelComm() { this.openComm = false; },
    showTab(row) {
      this.showCard = true
    },
    handleUpdate(row) {
      this.title = '编辑订单'
      this.open = true;
      this.isEdit = false;
      this.form = row;
    },
    handleDelete() { },
    handleExport() { },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
  },

}
</script>

<style lang="scss" scoped>
.radio-group .el-radio {
  margin-right: 0px;
}

.radio-group {
  border-radius: 1px;
  border: 1px solid #dcdfe6;
}
</style>
